﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ProductView</title>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/vue.js" type="text/javascript"></script>
    <script src="~/Scripts/axios.min.js" type="text/javascript"></script>

    <style>
        /* 黑条 */
        #switcher {
            height: 55px;
            width: 100%;
            top: 0;
            background: #000;
            text-align: center;
        }

            #switcher .center {
                display: inline-block;
                margin-top: 10px;
            }

                #switcher .center a {
                    color: #FFFFFF;
                    font-size: 20px;
                    font-weight: bold;
                    text-decoration: none;
                    padding: 0;
                    margin: 0;
                    display: inline-block;
                }
    </style>
</head>
<body>
    <div id="switcher">
        <div class="center">
            <a href="">后 台 管 理 系 统</a>
        </div>
    </div>
    <div id="container" class="container">
        <br>
        <form class="form-inline">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">新增</button>
            <div class="form-group" style="float: right;">
                <label>搜索</label> <input type="text" placeholder="请输入搜索关键字" class="form-control">
            </div>
        </form>
        <hr>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>ProductName</th>
                    <th>CategoryId</th>
                    <th>Property</th>
                    <th>Price</th> 
                    <th>Active</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in Products">
                    <td>{{item.id}}</td>
                    <td>{{item.ProductName}}</td>
                    <td>{{item.CategoryId}}</td>
                    <td>{{item.Property}}</td>
                    <td>{{item.Price}}</td>
                    <td>{{status(item.Active)}}</td>
                    <td>
                        <button type="button" class="btn btn-default" data-toggle="modal" v-on:click="Edit(item.id)">编辑</button>
                        <button type="button" class="btn btn-danger" v-on:click="DeleteProduct(item.id)">删除</button>
                    </td>
                </tr>

            </tbody>
        </table>
        <div tabindex="-1" role="dialog" id="addModal" class="modal fade">
            <div role="document" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">添加产品</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" action="javascript:">
                            <div style="width: 500px; margin: 20px auto 0 auto">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="ProductName" placeholder="必填项">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品状态</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="active">
                                            <option selected value="1">活跃</option>
                                            <option value="0">锁定</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品信息</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" style="width: 159px; display: inline-block;" name="ProductProperty" placeholder="如：重量">
                                        <input type="text" class="form-control" style="width: 159px; display: inline-block;" name="ProductInfo" placeholder="100克">
                                        <button class="btn btn-default" id="property" onclick="AddProperty()">添加产品信息</button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">信息展示</label>
                                    <div class="col-sm-8">
                                        <textarea class="form-control" rows="3" id="PropertyShow" placeholder="先添加产品信息，此项为必填项..."></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品价格</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="Price" placeholder="如：12.5 必填项">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品类别</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="categroyId">
                                            <option selected value="0">食品</option>
                                            <option value="1">电器</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button> 
                        <button type="button" class="btn btn-primary" onclick="AddProduct()">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <div tabindex="-1" role="dialog" id="editModal" class="modal fade" style="display: none;">
            <div role="document" class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title">更新产品</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" action="javascript:">
                            <div style="width: 500px; margin: 20px auto 0 auto">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" :value="Product.ProductName">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品状态</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" :value="Product.Active">
                                            <option selected value="1">活跃</option>
                                            <option value="0">锁定</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品类别</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" :value="Product.CategoryId">
                                            <option selected value="1">食品</option>
                                            <option value="0">电器</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品价格</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" :value="Product.Price">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品信息</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" style="width: 130px; display: inline-block;" id="PropertyName">
                                        <input type="text" class="form-control" style="width: 130px; display: inline-block;" id="PropertyValue">
                                        <button class="btn btn-default" v-on:click="ConfirmProperty">确认</button>
                                        <table class="table table-hover">
                                            <tr v-for="(Property,index) in Propertys">
                                                <td>{{Property.Name}}</td>
                                                <td>{{Property.Value}}</td>
                                                <td>
                                                    <a href="javascript:void(0)" v-on:click="UpdateProperty(index)">修改</a>
                                                    <a href="javascript:void(0)" v-on:click="DeleteProperty(index)">删除</a>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button> 
                        <button type="button" class="btn btn-primary" v-on:click="UpdateProduct">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var Property = [];
        function AddProperty() {
            var data = {};
            var key = $("input[name='ProductProperty']").val() == undefined ? '' : $("input[name='ProductProperty']").val().trim();
            data[key] = $("input[name='ProductInfo']").val() == undefined ? '' : $("input[name='ProductInfo']").val().trim();
            if (key == "" || data[key] == "") {
                alert("产品信息不能为空")
                return;
            }
            if (IsExist(key)) {
                alert("请不要输入相同的产品信息名");
                return;
            }
            $("input[name='ProductProperty']").val("");
            $("input[name='ProductInfo']").val("");
            Property.push(data);
            setProperty();
        }
        function AddProduct() {
            if (IsNull($("#ProductName").val()) || IsNull($("#active").val()) || Property.length == 0) {
                alert("必填项不能为空");
                return;
            }
            if (!IsNumber($("#Price").val())) {
                alert("价格为空或者价格有误");
            }
            var data = {
                "ProductName": $("#ProductName").val().trim(),
                "Property": JSON.stringify(Property),
                "Active": $("#active").val(),
                "Price": $("#Price").val().trim(),
                "categroyId": $("#categroyId").val(),
            }
            $.ajax({
                url: "/Product/AddProduct",
                type: "post",
                data: data,
                success: function (data) {
                    if (data.status == 200) {
                        alert(data.msg);
                        Reset();
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }
        function setProperty() {
            var str = "";
            $.each(Property, function (id, obj) {
                for (var key in obj) {
                    str += (key + ":" + obj[key] + "\n");
                }
            });
            $("#PropertyShow").val(str);
        }
        function IsExist(str) {
            for (var i in Property) {
                for (var key in Property[i]) {
                    if (key == str) {
                        return true;
                    }
                }
            }
            return false;
        }
        function IsNull(value) {
            if ((value == null ? "" : value) == "" || /\s/.test(value)) {
                return true;
            }
            return false;
        }
        function IsNumber(value) {
            if (/^[\d.]{1,}$/.test(value.trim())) {
                return true;
            }
            return false;
        }
        function DeleteProduct(id) {
            axios.post("/Product/DeleteProduct", { "id": id })
            .then(function (res) {
                console.log(res.data.msg);
            }, function (error) {
                console.log(error)
            });
        }
        function Reset() {
            $("#ProductName").val("");
            $("#active").val(0);
            $("#Price").val("");
            $("#categroyId").val(0);
            Property = [];
        }
        var app = new Vue({
            el: "#container",
            data: {
                Products: [],
                Product: {
                    Active: "",
                    CategoryId: "",
                    Price: "",
                    ProductName:"", 
                    Property:"",
                    id:"",
                },
                Propertys: [],
                selected: -1,  
                search: ""
            },
            created: function () {
                this.findall();
            },
            methods: {
                status: function (value) {
                    switch (value) {
                        case 0: return "锁定";
                            break;
                        case 1: return "活跃";
                            break;
                        default:
                            return "未知";
                    }
                },
                findall: function () {
                    axios.get("/Product/FindProductList").then(function (res) { 
                        app.Products =res.data.obj;
                    }, function (error) {
                        console.log(error);
                    });
                },
                loadProduct: function (id) {
                    $.ajax({
                        url: "/Product/FindOneProduct",
                        type: "post",
                        data: "id=" + id,
                        success: function (data) {
                            console.log(data)
                            if (data.status == 200) {
                                app.Product = data.obj;
                                app.loadProperty(JSON.parse(data.obj.Property));
                            } else {
                                console.log(data.msg)
                            }
                        }
                    });
                },
                loadProperty: function (Property) {
                    app.Propertys = [];
                    console.log(Property)
                    for (var index in Property)
                    {
                        for (var item in Property[index])
                        {
                            console.log(item)
                            var property = {
                                "Name": item,
                                "Value": Property[index][item],
                            }
                            console.log("组装："+JSON.stringify(property))
                            app.Propertys.push(property);
                        }
                    }
                },
                DeleteProduct: function (id) {
                    console.log(id);
                    var data = { "id": id };
                    $.ajax({
                        url: "/Product/DeleteProduct",
                        type: "post",
                        data: data,
                        success: function (data) {
                            console.log(data);
                        }
                    })
                },
                Edit: function (index) {
                    $('#editModal').modal('show');
                    this.loadProduct(index);
                },
                UpdateProperty: function (index) {
                    var data = app.Propertys[index];
                    $("#PropertyName").val(data.Name);
                    $("#PropertyValue").val(data.Value);
                    app.selected = index;
                },
                DeleteProperty: function (index) {  
                    app.Propertys.splice(index, 1);
                },
                ConfirmProperty: function () {
                    var key = $("#PropertyName").val().trim();
                    var value = $("#PropertyValue").val().trim();
                    if (key == "" || value == "") {
                        alert("请选择要修改的信息");
                        return;
                    }
                    if (this.CheckPropertysKey(key)) {
                        alert("已经存在相同的属性了");
                        return;
                    }
                    if (app.selected == -1) {
                        var data = {};
                        data.Name = key;
                        data.Value = value;   
                        app.Propertys.push(data);
                    } else if (app.selected >= 0) {
                        var data = app.Propertys[app.selected];
                        data.Name = key;
                        data.Value = value;
                        app.Propertys.splice(app.selected, 0, data);
                    }
                    app.selected = -1;
                   $("#PropertyName").val("");
                    $("#PropertyValue").val("");
                },
                CheckPropertysKey: function (key) {
                    for (var index in app.Propertys) {
                        for (var item in app.Propertys[index]) {
                            if (key == app.Propertys[index][item]) {
                                return true;
                            }
                        }
                    }
                    return false;
                },
                Merga:function(){
                    var ProductProperty = [];
                    var data = [];
                    for (var index in app.Propertys) {
                        data.push(app.Propertys[index].Name);
                        data.push(app.Propertys[index].Value);
                    }
                    for (var j = 0; j < data.length - 1; j += 2) {
                        var json = {};
                        json[data[j]] = data[j + 1];
                        ProductProperty.push(json);
                    }
                    return ProductProperty;
                },
                UpdateProduct: function () {
                    var ProductProperty = this.Merga();
                    console.log(ProductProperty)
                    var data = {
                        "id":app.Product.id,
                        "ProductName":app.Product.ProductName, 
                        "Property":JSON.stringify(ProductProperty),
                        "Price": app.Product.Price,
                        "Active": app.Product.Active,
                        "CategoryId": app.Product.CategoryId,
                    };
                    console.log(data)
                    $.ajax({
                        url: "/Product/UpdateProduct",
                        type: "post",
                        data: data,
                        success: function (data) {
                            if (data.status == 200) {
                                alert(data.msg);
                                $('#editModal').modal('hide');
                                app.findall();
                            } else {
                                alert(data.msg);
                            }
                        }
                    })
                }, 
            }
        });
    </script>

</body>
</html>
